<template>
  <div class="container clearfix">
    <div class="leftDir fl">
      <h4>知识库</h4>
      <directoryTree
        :treeData="treeData"
        @nodeClick="nodeClick"
        @addDirTree="addDirTree"
        @editDirTree="editDirTree"
        @delDirTree="delDirTree">
      </directoryTree>
    </div>
    <div class="fl rightContent">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
    <drawer
      v-if="drawer.isShow"
      custom-class="drawer"
      :title="drawer.title"
      :drawer="drawer.isShow"
      @save="saveDirTree"
      @closeDraw="cancelDrawer"
      @cancelFun="cancelDrawer">
      <div slot="column">
        <addOrEditDirTree :isEdit="isEdit" v-if="drawer.isShow" ref="dirTreeRef" :indexRow="indexRow"></addOrEditDirTree>
      </div>
    </drawer>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Ref } from 'vue-property-decorator'
import directoryTree from '@views/km/knowledgeBase/directoryTree.vue'
import drawer from '@/common/views/drawer/index.vue'
import addOrEditDirTree from '@/views/km/knowledgeBase/addOrEditDirTree.vue'
import { KmModule } from '@/store/modules/km/index'
import { CommonModule } from '@/store/modules/common'
import { getNewSession } from '@/utils/kmAccess'

@Component({
  name: 'knowledgeBase',
  components: {
    directoryTree,
    drawer,
    addOrEditDirTree
  }
})
export default class KnowledgeBase extends Vue {
[x: string]: any
  @Ref() private readonly dirTreeRef!: addOrEditDirTree
  private $confirm: any
  private $router: any
  private $message: any
  private $bus: any
  private drawer = {
    title: '添加目录',
    isShow: false
  }

  private currentRoute: string = ''

  private treeData: any[] = []

  private indexRow: any = {} // 当前行的数据

  private clickObj: any = {}

  private isEdit: boolean = false

  private saveDirTree () { // 目录弹窗保存
    this.$nextTick(() => {
      if (this.dirTreeRef) {
        const { transformData } = this.dirTreeRef
        const { parentId, label, level, type, _id } = this.dirTreeRef.dirTreeForm
        const sendData: any = { parentId, label, level, kmType: 'inner', ...transformData }
        if (type === 'edit') {
          sendData.catalogId = _id
        }
        const actionData = { url: `/im-km/action/catalog/${type === 'add' ? 'create' : 'update'}`, method: 'POST', data: sendData }
        KmModule.KmCommonAction(actionData).then(async res => {
          if (res && res.success) {
            this.$message.success(`${type === 'add' ? '添加' : '修改'}目录成功`)
            this.drawer.isShow = false
            this.indexRow = null
            const newSession = getNewSession(this.$store.state.common.session, transformData)
            if (newSession) {
              CommonModule.setSession(newSession)
            }
            this.getTreeData()
          }
        })
      }
    })
  }

  private cancelDrawer () { // 目录弹窗取消
    this.drawer.isShow = false
    this.indexRow = null
  }

  private nodeClick (obj: any) {
    this.clickObj = obj
    this.$router.push('/knowledge_mgt/index/knowledge_mgt_channel/' + obj.node._id)
    window.setTimeout(() => {
      this.$bus.$emit('directoryClick', obj)
    }, 50)
  }

  private addDirTree (row: any) { // 添加目录弹窗
    this.drawer.title = '新增目录'
    this.isEdit = false
    row.type = 'add'
    this.indexRow = row
    this.drawer.isShow = true
  }

  private editDirTree (row: any) { // 修改目录
    this.indexRow = row
    this.drawer.title = '编辑目录'
    this.isEdit = true
    this.drawer.isShow = true
    row.type = 'edit'
  }

  private delDirTree (row: any) { // 删除目录
    const { _id } = row
    this.$confirm('删除目录后，该目录下所有知识均会被删除, 是否继续?', '目录删除', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      if (row.children && row.children.length > 0) {
        this.$message.error('该目录下仍有子目录，删除失败')
      } else {
        const actionData = { url: '/im-km/action/catalog/delete', method: 'POST', data: { catalogId: _id, kmType: 'inner' } }
        KmModule.KmCommonAction(actionData).then(res => {
          if (res && res.success) {
            this.$message({ type: 'success', message: '删除目录成功!' })
            this.$router.push('/knowledge_mgt/index/knowledge_mgt_channel')
            this.getTreeData()
          }
        })
      }
    }).catch(() => {
      this.$message({ type: 'info', message: '已取消删除' })
    })
  }

  private getTreeData () {
    const actionData = { url: '/im-km/action/catalog/list', method: 'POST', data: { kmType: 'inner' } }
    KmModule.KmCommonAction(actionData).then(res => {
      if (res && res.success) {
        this.treeData = res.data.tree || []
      }
    })
  }

  private activated () {
    this.getTreeData()
  }
}
</script>
<style lang="stylus" scoped>
@import '~@/common/style/common.styl'
.container
  height 100%
  border-radius 10px
  height 100%
  border 1px solid #ecf0f3
  box-shadow 0px 0px 4px 0px #e0e6f0, 0px 1px 4px 0px #e0e6f0
  box-sizing border-box
  margin 0 2px 2px 0
  .leftDir
    padding 16px 0px 16px 16px
    width 220px
    overflow auto
    height 100%
    border-right 1px solid $border-main
    h4
      font-weight 600
  .rightContent
    padding 16px 16px 16px 0px
    width calc(100% - 240px)
    margin-left 20px
    height 100%
    padding-left 5px
  .drawer
  >>> .el-drawer
        width 600px !important
  >>> .transfer-center-item button
        width 32px
        border none
  >>> .transfer-center-item:nth-child(2) button
        background: #ECF5FC;
        i
          color #008BEE
</style>
